<template>
    <div class="department">
        <div class="userSheach">
            <n-form ref="formRef" inline :model="parmas">
                <n-form-item label="部门名称" path="user.name" label-placement="left">
                    <n-input v-model:value="parmas.deptName" placeholder="请输入角色名称" />
                </n-form-item>
                <n-form-item label-placement="left">
                    <n-button attr-type="button" type="info" @click="queryBtn">查询</n-button>
                    <n-button attr-type="button" class="resetClass" @click="resetData">重置</n-button>
                </n-form-item>
            </n-form>
        </div>
        <div class="usertable">
            <div class="usertableAllBtn">
                <n-button type="info" class="addBtn" @click="addUser">创建</n-button>
            </div>
                  <n-data-table max-height="300" :columns="columns" :data="tableData" :pagination="pagination"
        :row-key="(rowData) => (rowData._id)" />
            <!-- <div class="userPagination">
                <span></span>
                <n-pagination :item-count="pagination.total" :on-update:page="updatePage"
                    :on-update:page-size="updateSize" :page-sizes="[2, 5, 15, 40]" show-size-picker />
            </div> -->
        </div>
        <!-- 创建编辑弹窗 -->
        <OpenCreateVue ref="deparment" @addUserClear="addUserClear" />
    </div>
</template>
<script lang="ts">

import { defineComponent, ref, reactive, toRefs, h, onBeforeMount } from 'vue'
import { NButton,useMessage } from 'naive-ui'
import OpenCreateVue from './component/openCreate.vue'
import { deprtList,deptsOperate } from '../../../api/dept.js'
const message = useMessage()
export default defineComponent({
    components: {
        OpenCreateVue
    },
    setup() {
        const columns = [
            // {
            //   type: 'selection',
            //   disabled(row, index) {
            //       return row.name === 'Edward King 3'
            //   }
            // },
            {
                title: '部门名称',
                key: 'deptName'
            },
            {
                title: '负责人',
                key: 'userName'
            },
            {
                title: '创建时间',
                key: 'createTime',
                render: (row) => {
                    return row.createTime?.split('T')[0]
                }
            },
            {
                title: '更新时间',
                key: 'updateTime',
                render: (row) => {
                    return row.updateTime?.split('T')[0]
                }
            },
            {
                title: '操作',
                key: 'actions',
                render(row) {
                    return h(
                        'div',
                        {},
                        [
                            h(
                                NButton,
                                {
                                    size: 'small',
                                    type: "info",
                                    onClick: () => methods.sendMailEditor(row)
                                },
                                {
                                    default: () => '编辑'
                                }
                            ),
                            h(
                                NButton,
                                {
                                    size: 'small',
                                    type: "error",
                                    class: 'delteBtn',
                                    onClick: () => methods.userOneDelete(row)
                                },
                                {
                                    default: () => '删除'
                                }
                            )
                        ]
                    )
                }
            }
        ]
        const deparment = ref(null)
        const postRole = ref(null)
        const parameter = reactive({
            parmas: {
                // pageNum: 1,
                // pageSize: 10,
                deptName: '',
                // status: ''
            },
            pagination: {
                total: 10,
            },
            tableData: [],
            dataTable: [],
        })

        onBeforeMount(() => {
            methods.pageList(parameter.parmas)
        })

        const methods = reactive({
            // 列表
            pageList: (item) => {
                deprtList(item).then(res => {
                    // parameter.pagination.total = res.page.total
                    parameter.tableData = res
                })
            },
            //编辑
            sendMailEditor(item) {
                let data = {
                    action: 'edit',
                    value: item,
                    _id: item._id
                }
                deparment.value.createDepart(data)
            },
            //创建
            addUser() {
                let data = {
                    action: 'create'
                }
                deparment.value.createDepart(data)
            },
            // 分页
            updatePage(e) {
                // parameter.parmas.pageNum = e
                // methods.pageList(parameter.parmas)
            },
            updateSize(e) {
                // parameter.parmas.pageSize = e
                // methods.pageList(parameter.parmas)
            },

            // 回应
            addUserClear(item) {
                methods.pageList(parameter.parmas)
            },
            // 删除
            userOneDelete(item) {
                deptsOperate({ _id: item._id,action:'delete' }).then(res => {
                    message.success('删除成功')
                    methods.pageList(parameter.parmas)
                })
            },

            // 查询
            queryBtn() {
                methods.pageList(parameter.parmas)
            },
            resetData() {
                parameter.parmas.deptName = ''
            }
        })

        return {
            columns,
            deparment,
            postRole,
            ...toRefs(methods),
            ...toRefs(parameter),
        }
    }



})
</script>

<style lang="scss">
.department {
    height: 100%;
    padding: 10px;
    // background: rgb(224, 220, 220);

    .usertable {
        height: 100%;
        padding: 10px;
        background: #fff;

        .usertableAllBtn {
            padding: 5px;
            display: flex;

            .addBtn {
                margin-right: 10px;
            }
        }

        .delteBtn {
            margin: 0 5px;
        }

        .userPagination {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

    }

    .userSheach {
        background: #fff;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        font-size: 17px;
        padding: 20px 10px !important;

        .n-form-item-feedback-wrapper {
            min-height: auto !important;
        }

        .resetClass {
            margin-left: 10px;
        }
    }
}
</style>